package myJs.admin.testManage

import myJs.Implicits._
import myJs.admin.updateTest.UpdateTest
import myJs.admin.viewTest.ViewTest
import myJs.api.Api
import myJs.cps.BootstrapTableCp.Column
import myJs.cps.project.QrcodeModalCp
import myJs.cps.{BootstrapTableCp, Style}
import myJs.tool.Pojo.{DateSearch, TextSearch}
import org.scalajs.macrotaskexecutor.MacrotaskExecutor.Implicits._
import shared.pojo.Sample.ProcessData
import slinky.core.FunctionalComponent
import slinky.core.annotations.react
import slinky.core.facade.Hooks.{useEffect, useState}
import slinky.web.html._
import typings.csstype.csstypeStrings
import upickle.default._

import scala.collection.immutable.SeqMap

/**
 * Created by yz on 21/1/2022
 */
@react object TableCp {

  val curPage = TestManage
  type Props = Unit

  val component = FunctionalComponent[Props] { props =>

    val (datas, setDatas) = useState(List.empty[ujson.Obj])
    val (qrcodeId, setQrcodeId) = useState("")
    val (qrcodeShow, setQrcodeShow) = useState(false)

    object FTool {

      def showQrcode(idStr: String) = () => {
        setQrcodeId(idStr)
        setQrcodeShow(true)
      }

      def qrcodeShowChange = (v: Boolean) => {
        setQrcodeShow(v)
      }

      def tbFmt(field: String) = (v: ujson.Value, row: ujson.Obj) => {
        field match {
          case "info" => val processes = v.transform(reader[List[ProcessData]])
            val str = processes.sortWith((x, y) => {
              x.time < y.time
            }).map { process =>
              process.title
            }.mkString(" -> ")
            span(str)()
          case "sampleId" =>
            span(
              a(href := s"${ViewTest.absolutePath}?id=${row("id").num}", s"${v.str}"),
              " ",
              i(className := "fa fa-qrcode", style := Style(cursor = csstypeStrings.pointer),
                onClick := FTool.showQrcode(v.str))
            )()
          case _ =>
            span(v.myStr)()
        }
      }

      def comVFmt(fileTitle: String) = (v: ujson.Value, row: ujson.Obj) => {
        fileTitle match {
          case _ => v.myStr
        }
      }

      def operateFmt = (v: ujson.Value, row: ujson.Obj) => {
        span(
          a(style := Style(cursor = csstypeStrings.pointer), className := "btn btn-success btn-xs myUpdateShow",
            title := "修改", data - "value" := s"${row("id")}",
            href := s"${UpdateTest.absolutePath}?id=${row("id")}",
            span(
              em(className := "fa fa-edit", "修改")
            )
          ),
          " "
        )()
      }

      def refreshTableB = () => {
        Api.test.dbAll.map { response =>
          setDatas(response)
        }
      }

    }

    useEffect(() => {
      FTool.refreshTableB()
    }, List()
    )

    val map = SeqMap("sampleId" -> "样本编号", "testType" -> "测试类型", "company" -> "公司", "info" -> "测试信息",
      "updateTime" -> "更新时间")
    val basicColumns = map.map { case (k, v) =>
      val searchKind = k match {
        case "id" => TextSearch
        case "updateTime" => DateSearch
        case _ => TextSearch
      }
      val fmt = FTool.tbFmt(k)
      val comVF = FTool.comVFmt(v)
      Column(field = k, title = v, operable = true, searchKind = searchKind, formatter = fmt, comVF = comVF)
    }.toList
    val operateColumn = Column(field = "operate", title = "操作", formatter = FTool.operateFmt, comVF = FTool.comVFmt(""))
    val columns = basicColumns :+ operateColumn

    div(
      BootstrapTableCp(columns = columns, datas = datas,
        pageList = List(10,25), pageSize = 10),
      QrcodeModalCp(show = qrcodeShow, showChange = FTool.qrcodeShowChange,
        sampleId = qrcodeId)
    )

  }


}
